<template>
  <div>
    <div class="body">
        <div class="left">
            <div class="router">
                <div class="tagList">
                    <div @click="checkTag(item.value,index)" v-for="(item,index) in tagList" :key="index" class="tag" :class="{active:item.active}">
                         {{ item.label }}
                    </div>
                </div>
            </div>
            <div class="content">
                <list :list="list" :loading="loading"></list>
            </div>
        </div>
        <author class="user"></author>
    </div>

  </div>
</template>

<script>
    import author from '@/components/author/author.vue'
    import list from '@/components/list/list.vue'
    import tagList from '@/api/tag/tagList';
    import selectBlogByTag from '@/api/blog/selectBlogByTag';
    import {messages} from "../../utils/msg-box";
	export default {
        components:{
            author,list
        },
		data(){
			return {
                tagList: [],
                list: [],
                loading: true,
                type: '111'
			};
		},
		methods: {
            checkTag(id,i) {
                console.log(id)
                this.tagList.forEach(element => {
                    element.active = false
                });
                this.tagList[i].active = true
                this.type = id
                this.getData()
            },
            async getData() {
                this.loading = true
                // ajax请求
                let res = await selectBlogByTag({tagId: this.type})
                setTimeout(()=> {
                    this.loading = false
                },100)
                if (res.success){
                    this.list = res.data;
                }else {
                    messages('error', res.errMsg);
                }

            },
            async getTagList(){
                let res = await tagList();
                if (res.success){
                    this.tagList = res.data;
                    this.type = this.tagList[0].value
                    this.tagList[0].active = true
                }
            }
        },
        async created() {
            console.log(1)
            await this.getTagList()
            this.getData()
        },
        mounted() {
            // this.getData()
        }
    }
</script>

<style lang="scss" scoped>
	.body {
		width: 1200rem;
		height:100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding-top: 20rem;
        margin:76rem auto 0;
		.left {
            width: 940rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            .router {
                box-shadow: 0rem 2rem 12rem 6rem rgba(3,5,27,0.06);
                border-radius: 6rem;
                height: 48rem;
                background: #fff;
                display: flex;
                align-items: center;
                .tagList {
                    display: flex;
                    padding-bottom: 0.1rem;
                    .tag {
                        padding: 0 10rem;
                        cursor: pointer;
                    }
                    .tag.active {
                        color:$color;
                    }
                }
            }
            .content {
                box-shadow: 0rem 2rem 12rem 6rem rgba(3,5,27,0.06);
                border-radius: 6rem;
                flex: 1;
                min-height: 600rem;
                margin-top: 10rem;
                background: #fff;
                width: 100%;
            }
        }
        .user {
            width: 240rem;
            height: 240rem;
        }
	}
	@media screen and (max-width: 750px) {
        .body {
            .user {
                display: none;
            }
        }
    }
</style>
